import React, {useState} from 'react'
import './App.scss'
import {
  MinusOutlined,
  CloseOutlined,
  ExpandOutlined,
  CompressOutlined
} from '@ant-design/icons';
import {Button, Modal, Tree} from 'antd';

import {Breadcrumb, Layout, Menu, theme} from 'antd';
import Title from "./conponent/Title/index.jsx";
import Setting from "./conponent/Setting/index.jsx";
import {useDispatch, useSelector} from 'react-redux'
import {storeSetSettingVisible} from "./store/store.js";

const {Header, Content, Sider} = Layout;
const {DirectoryTree} = Tree;

function App() {
  const dispatch = useDispatch()
  const [count, setCount] = useState(0)
  const {
    token: {colorBgContainer, borderRadiusLG},
  } = theme.useToken();

  const treeData = [
    {
      title: 'parent 0',
      key: '0-0',
      children: [],
    },
    {
      title: 'parent 1',
      key: '0-1',
      children: [],
    },
  ];
  const onSelect = (keys, info) => {
    console.log('Trigger Select', keys, info);
  };
  const onExpand = (keys, info) => {
    console.log('Trigger Expand', keys, info);
  };

  const [settingVisible, setSettingVisible] = useState()
  return (
    <>

      <Title></Title>

      <Layout style={{width: '100%'}}>
        <Header
          style={{
            display: 'flex',
            alignItems: 'center',
          }}
        >
          <div className="demo-logo"/>
          <Menu
            theme="dark"
            mode="horizontal"
            defaultSelectedKeys={['2']}
            items={[
              {
                key: 1,
                label: '文件',
                children: [
                  {
                    key: '1-1',
                    label: '项目设置',
                    onClick() {
                      dispatch(storeSetSettingVisible(true))
                    }
                  },
                  {
                    key: '1-2',
                    label: '工作目录'
                  }
                ]
              },
            ]}
            style={{
              flex: 1,
              minWidth: 0,
            }}
          />
        </Header>
        <Layout>
          <Sider
            width={200}
            style={{
              background: colorBgContainer,
            }}>
            <DirectoryTree
              multiple
              defaultExpandAll
              onSelect={onSelect}
              onExpand={onExpand}
              treeData={treeData}
            />
          </Sider>
          <Layout
            style={{
              padding: '0 24px 24px',
            }}
          >
            <Breadcrumb
              style={{
                margin: '16px 0',
              }}
              items={[
                {title: "Home", key: 'Home'},
                {title: "List", key: 'List'},
                {title: "App", key: 'App'},
              ]}
            >
            </Breadcrumb>
            <Content
              style={{
                padding: 24,
                margin: 0,
                minHeight: 280,
                background: colorBgContainer,
                borderRadius: borderRadiusLG,
              }}>
              Content
            </Content>
          </Layout>
        </Layout>

      </Layout>
      <Setting/>
    </>
  )
}

export default App
